<template>
  <div class="row">
    <el-container>
      <el-header class="bg-white el-header" height="auto">
        <div class="row cl-top">
          <i v-if="item.good">
            <img
              class="typeImg"
              draggable="false"
              src="https://cdn.hterobot.com/vue/public/forum/jian.png"
            />
          </i>
          <i v-if="item.lock">
            <img
              class="typeImg"
              draggable="false"
              src="https://cdn.hterobot.com/vue/public/forum/jian.png"
            />
          </i>
          <i v-if="item.top">
            <img
              class="typeImg"
              draggable="false"
              src="https://cdn.hterobot.com/vue/public/forum/re.png"
            />
          </i>
          <h3 v-text="item.title"></h3>
        </div>
      </el-header>
      <el-main class="bg-white">
        <div class="row cl-top">
          <router-link :to="{name: 'user', params:{uid: item.uid}}" class="col-2 text-left">
            <img
              class="authorImg"
              draggable="false"
              :src="item.headimg?item.headimg:'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/public/forum/touxiang.png'"
            />
            <span>{{item.username}}</span>
          </router-link>
          <div class="col">
            <div class="row">
              <div class="col">
                <span v-text="times(item.createtime)"></span> 天前
              </div>
              <div class="col">
                <i class="icon-xinxi icon iconfont"></i>
                {{ item.reply_count }}
              </div>
              <div class="col">
                <i class="el-icon-view"></i>
                {{ item.click_count }}
              </div>
              <div class="col">
                <i class="icon-xinaixin- icon iconfont text-success"></i>
                {{ item.collect_count }}
              </div>
            </div>
          </div>
        </div>
        <iframe
          id="iframe"
          class="iframe border-bottom-0"
          width="100%"
          :height="height"
          :src="`https://cdn.hterobot.com/${item.contenturl}`"
          frameborder="0"
          ref="iframe"
        ></iframe>
        <div class="row border-top likes">
          <div class="col text-right">
            <el-button
              round
              icon="el-icon-star-off"
              :disabled="getuser?false:'disabled'"
              @click="shoucang"
              :class="isoffline"
            >收藏</el-button>
          </div>
        </div>
        <div class="form-group text-right" v-if="getuser">
          <input
            type="email"
            class="form-control"
            aria-describedby="emailHelp"
            placeholder="共同学习，写出你的评论吧"
            v-model="content"
          />
          <br />
          <el-button type="primary" @click="createreply()" round>评论</el-button>
        </div>
        <div class="form-group text-right" v-else>
          <input
            type="email"
            class="form-control"
            aria-describedby="emailHelp"
            placeholder="登陆后才能评论"
            disabled
          />
          <br />
          <router-link :to="{name:'login' }" class="btn">
            <el-button type="primary" round>登陆</el-button>
          </router-link>
        </div>
        <el-container class="row border-bottom pinglun" v-for="(v, i) in replys" :key="i">
          <el-aside width="50px" class="text-center">
            <img
              :src="v.headimg?v.headimg:'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/public/forum/touxiang.png'"
              width="25"
              alt
            />
          </el-aside>
          <el-main style="padding: 5px;">
            <h5>
              <router-link :to="{ name: 'user', params: {uid: v.uid} }" v-text="v.username"></router-link>
            </h5>
            <p class="text-lowercase" v-text="v.content"></p>
            <div class="text-right">
              <i class="icon-xinxi icon iconfont" @click="indextrue(i)"></i>
              <i class="icon-xinaixin- icon iconfont" @click="relpylike(v)" :class="islike(v)"></i>
            </div>
            <div class="form-group text-right" v-show="index[i]" v-if="getuser">
              <input
                type="email"
                class="form-control"
                aria-describedby="emailHelp"
                placeholder="共同学习，写出你的评论吧"
                v-model="content"
              />
              <br />
              <el-button type="primary" @click="createreply( v.ID)" round>评论</el-button>
            </div>
            <el-container
              v-for="(vo, index) in v.children"
              class="bg-light"
              :key="`1detail${index}`"
            >
              <el-aside width="50px" class="text-center">
                <img
                  :src="vo.headimg?vo.headimg:'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/public/forum/touxiang.png'"
                  width="25"
                  alt
                />
              </el-aside>
              <el-main style="padding: 5px;">
                <h5>
                  <router-link :to="{ name: 'user', params: {uid: vo.uid} }" v-text="vo.username"></router-link>
                </h5>
                <p class="text-lowercase" v-text="vo.content"></p>
                <div class="text-right data-iv">
                  <i
                    class="icon-xinaixin- icon iconfont"
                    @click="relpylike(vo)"
                    :class="islike(vo)"
                  ></i>
                </div>
              </el-main>
            </el-container>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {
  asyncgettopicbyid,
  asynccreatereply,
  asyncgetreply,
  asynccreatetopiccollect,
  asyncgettopiccollectbyuser,
  asynccreaterepcyfabulous
} from "../../../plugins/api.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      item: {},
      html: "",
      content: "",
      replys: [],
      isoffline: "",
      index: [],
      height: 500
    };
  },

  watch: {
    async $route() {
      this.start();
    }
  },
  computed: mapGetters(["getuser", "getuserreplyfabulous"]),
  props: ["id"],
  async mounted() {
    await this.start();
  },
  methods: {
    async relpylike(v) {
      await asynccreaterepcyfabulous({ tableid: v.ID });
      await this.$store.dispatch("actionuserreplyfabulous");
    },
    async shoucang() {
      if (this.getuser) {
        await asynccreatetopiccollect({ topicid: this.item.ID });
        console.log(this);
        this.isoffline = this.isoffline ? "" : "el-button--success";
      } else {
        this.$message.error("请登录");
      }
    },
    indextrue(i) {
      console.log(i);
      this.index = [];
      this.index[i] = !this.index[i];
    },
    times(time) {
      return Math.ceil(
        (Date.parse(new Date()) - Date.parse(new Date(time))) /
          1000 /
          60 /
          60 /
          24
      );
    },
    islike(v) {
      if (this.getuser) {
        let data = this.getuserreplyfabulous.find(item => item.tableid == v.ID);
        if (data) {
          return "text-success";
        }
      }
    },
    async start() {
      const iframe = this.$refs.iframe;
      // eslint-disable-next-line no-unused-vars
      iframe.onload = e => {
        iframe.contentWindow.postMessage("", "*");
        setTimeout(() => {
          iframe.contentWindow.postMessage("", "*");
        }, 120);
      };
      window.onmessage = e => {
        if (e.origin === "https://cdn.hterobot.com") {
          if (e.data.body) {
            console.log(e.data);
            this.height = e.data.body.scrollHeight + 100;
          }
        }
      };
      if (this.id) {
        this.item = await asyncgettopicbyid({ ID: this.id });
        const data = await asyncgetreply({ topicid: this.id });
        const arr = [];
        const brr = [];
        for (let v of data) {
          if (!v.replyid) {
            v.children = [];
            arr.push(v);
          } else {
            brr.push(v);
          }
        }
        for (let v of brr) {
          for (let ar of arr) {
            if (ar.ID == v.replyid) {
              ar.children.push(v);
            }
          }
        }
        this.replys = arr;
        if (this.getuser) {
          try {
            await asyncgettopiccollectbyuser({
              topicid: this.id
            });
            this.isoffline = "el-button--success";
          } catch (err) {
            this.isoffline = "";
          }
        }
      }
    },
    async createreply(replyid) {
      const { username, headimg } = this.getuser;
      if (this.content) {
        await asynccreatereply({
          topicid: this.id,
          content: this.content,
          replyid,
          username,
          headimg
        });
        this.content = "";
        this.start();
      } else {
        this.$message.error("评论不能为空");
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.el-main {
  overflow: none !important;
}
.el-header {
  padding: 15px 25px !important;
}
.data-iv {
  margin-right: -5px;
}
.text-success {
  color: red !important;
}
button:focus {
  outline: 0px;
  outline: 0px;
}
.el-button--success {
  background: red;
  border: 1px solid red;
}
.cl-top {
  line-height: 49px;
}

.authorImg {
  margin-right: 8px;
  border-radius: 20px;
  width: 20px;
  height: 20px;
}

.likes {
  padding: 40px;
  text-align: right;
}
.pinglun {
  margin-top: 15px;
}
.text-right .icon {
  margin-left: 25px;
  margin-right: 25px;
  cursor: pointer;
}
.iframe {
  overflow: hidden;
}
</style>